<template>
  <div>
    <crudTable :option="option"
               :data="data"
               :page="page"
               :searchOptions="searchOptions"
               @onLoad="onLoad"
               @handleCurrentChange="handleCurrentChange"
               @handleSizeChange="handleSizeChange"
               @getQuery="getQuery">
      <template v-slot:cpagination>
        <!-- <div >cpagination插槽</div> -->
        <!-- 之后需要往分页左边放内容就写在上面的div里 -->
      </template>
    </crudTable>
  </div>
</template>

<script>
import crudTable from '@/components/CrudTable'
import {deliveryDetails, driverType} from '@/api/CollectDetail'

export default {
  components: {
    crudTable,//增删改查表
  },
  data() {
    return {
      query: {},
      //搜索框配置项
      searchOptions: {
        clearBtn: false,
        items: [
          {
            type: 'times',
            key: ['arrivedTimeStart', 'arrivedTimeEnd'],
            label: '到达时间'
          },
          {
            type: 'select',
            key: 'asOutsideDriver',
            label: '司机类型',
            dicData: [{
              desc: '馆外',
              val: '0'
            }, {
              desc: '馆内',
              val: '1'
            }]
          },
          {
            type: 'select',
            key: 'fullName',
            label: '司机姓名',
            dicData: []
          }
        ]
      },
      //表格数据
      data: [],
      //表格配置选项
      option: {
        isSearch: false,
        excelBtn: true,//是否展示Excel按钮
        excelUrl: '/api/CostOfTheDead/delivery_details-export-excel',//Excel的下载Url
        excelName: "司机明细_",//excel的文件名
        height: 580,//是否设置高度（超出会显示滚动条）
        isIndex: true,//是否需要索引项
        //表格项配置
        items: [
          {
            key: 'businessCode',
            label: '业务编码',
            align: 'center',
          },
          {
            key: 'arrivedTime',
            label: '到馆时间',
            align: 'center',
          },
          {
            key: 'deadName',
            label: '逝者姓名',
            align: 'center',
          },
          {
            key: 'deadGenderCode',
            label: '性别',
            align: 'center',
            dicVal: 'sex'
          },
          {
            key: 'householdRegistrationPlace',
            label: '户籍地址',
            align: 'center',
          },
          {
            key: 'deathDate',
            label: '死亡时间',
            align: 'center',
          },
          {
            key: 'agentName',
            label: '家属/承办人姓名',
            align: 'center',
          },
          {
            key: 'mobilePhone',
            label: '联系电话',
            align: 'center',
          },
          {
            key: 'driverUserName',
            label: '接运司机',
            align: 'center',
          },
          {
            key: 'transportPlace',
            label: '接尸地点',
            align: 'center',
          }
        ]
      },
      //分页数据
      page: {
        pageSize: 20,//默认页码大小
        total: 0,//总数
        currentPage: 1//当前页
      },
    }
  },
  watch: {
    'query.asOutsideDriver': function (n) {
      this.searchOptions.items[2].dicData = []
      driverType({asOutsideDriver: n}).then(res => {
        let tmpArr = res.data
        tmpArr.map(el => {
          this.searchOptions.items[2].dicData.push({desc: el.fullName, val: el.fullName})
        })
      })
    },
  },
  methods: {
    //获取参数
    getQuery(query) {
      this.query = query
    },
    //页面加载事件
    onLoad({page, query}) {
      let params = {
        ...page,
        ...query
      }
      deliveryDetails(params).then(res => {
        this.data = res.data.list
        this.page = res.data.pager
      })
    },
    // 分页组件事件开始
    // 当前页改变事件
    handleCurrentChange({currentPage}) {
      this.page.currentPage = currentPage
    },
    //每页展示数量改变触发
    handleSizeChange({pageSize}) {
      this.page.pageSize = pageSize
    },
  },
}
</script>

<style lang="scss" scoped>
</style>
